<template>
    <!-- active-text-color="#ffd04b"
        background-color="#545c64"
    可加可不加 -->
    <!-- 可以直接加router 跳转路由 -->
    <el-menu  default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse()" @open="handleOpen" @close="handleClose" >
      <h2 class="titleh3" > {{isCollapse()?'后台':'后台管理系统'}}</h2>
   <el-menu-item  @click="clickmen(item)" v-for="item in computedNoChildren" :key="item.name" :index="item.path">
        <!-- elemenr-puls 需要component组件 -->
        <el-icon> <component :is="item.icon"/></el-icon>
        <!-- <component :is="item.icon"  /> -->
        <template #title>{{ item.label }}</template>
      </el-menu-item>

    <el-sub-menu v-for="item in computedChildren" :key="item.label" :index="item.label">
        <template #title>
          <el-icon> <component :is="item.icon"/> </el-icon>
          <span>{{ item.label }}</span>
        </template>
        <el-menu-item-group  v-for="itemsecond in item.children" :key="itemsecond.label">
            <!-- 打开这个就知道了 -->
          <!-- <template #title><span>Group One</span></template> -->
          <el-menu-item  @click="clickmen(itemsecond)" :index="itemsecond.label">{{ itemsecond.label }}</el-menu-item>
        </el-menu-item-group>
        
        <!-- <el-menu-item-group title="Group Two">
          <el-menu-item index="1-3">item three</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="1-4">
          <template #title><span>item four</span></template>
          <el-menu-item index="1-4-1">item one</el-menu-item>
        </el-sub-menu> -->
      </el-sub-menu>
      
      <el-menu-item index="4">
        <el-icon><setting /></el-icon>
        <template #title>设置</template>
      </el-menu-item>
    </el-menu>

  </template>
  
<script lang="ts" setup>
// import { useRouter, useRoute } from 'vue-router'
import { computed, reactive, ref} from 'vue'
//   这里导入相关图标名字
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  HomeFilled,
  User,
  More 
} from '@element-plus/icons-vue'
import router from '../router';
import store from '../store';

// const isCollapse = ref(false)
// 非父子通信
// provide("isCollapse",isCollapse)
const isCollapse=()=>{
  // 到这赋值给按钮
    return store.state.isCollapse
}

const sdata = reactive(
    {
datalist:[
    {
        path:'/',
        name:'home',
        label:'首页',
        icon:'HomeFilled',
        url:'Home/Home'
    },
    {
        path:'/mall',
        name:'mall',
        label:'商品管理',
        icon:'Menu',
        url:'MallManage/MallManage' 
    },
    {
        path:'/user',
        name:'user',
        label:'用户管理',
        icon:'User',
        url:'UserManage/UserManage'   
    },
    {
     label:'其他',
     icon:'More',
     children:[
     {
        path:'/Page',
        name:'page',
        label:'页面1',
        url:'Other/PageOne'   
    },
    {
        path:'/page2',
        name:'page2',
        label:'页面2',
        url:'Other/PageTwo'  
    }
     ]
    }
]
})
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

// 没有子菜单
const computedNoChildren=computed(()=>{
        console.log(sdata.datalist);
        return sdata.datalist.filter(item=>!item.children)
        
})
// 有子菜单
const computedChildren=computed(()=>{
        console.log(sdata.datalist);
        return sdata.datalist.filter(item=>item.children)
        
})


const clickmen=(item)=>{
    router.push(item.path)
}
</script>
  
  <style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    height: 100vh;
  }
  
  /* h3标题 */
.titleh3{
    color: black;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    font-weight: 400;
  }

  /* 下拉有空隙 调节 */
  
  .el-menu-item-group__title {
    padding: 0;
  }
  .ass{
    height: 1em;
    width: 1em;
    margin-right: 5px;
  }
  </style>
  